<template>
	<u-popup :show="show" @close="close" :closeable="true">
		<view class="select">
			<view class="bold title">选择地址</view>
			<view class="select_list">
				<view class="flex padding">
          <template v-if="opt_.length>0">
            <view v-for="items,index in opt_" class="select_active bold" :key="index" @click="select(items,index)">{{items}}</view>
          </template>
					<view class="select_active bold" v-if="lastType" >请选择</view>
				</view>
				<view class="select_opt">
            <view class="select_opt_list" :class="[selcetIndex === indexs && 'select_opt_active']" v-for="item,indexs in opt" @click="selectList(item,indexs)" :key="indexs">
              {{item.name}}
                <view>
                  <u-icon name="checkmark" v-if="selcetIndex === indexs" color="#FF4201" size="28rpx"></u-icon>
                </view>
            </view>

				</view>
			</view>
		</view>
	</u-popup>

</template>
<script lang="ts" setup>
	import { ref, onMounted,reactive,watch,toRefs } from 'vue'
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { setApiData } from '@/hooks'
import { set_, get_ ,clear_} from '@/utils'
	const { setApi } = setApiData()
	export interface Props {
		show?:boolean
	}
	const props = withDefaults(defineProps<Props>(),{
		show:false
	})
  const { show }  = toRefs(props)
  watch(show,(val)=>{
console.log(val,'val')
  },{deep:true,immediate:true})
	onMounted(() => {
		init_()
	})
  const selcetIndex = ref<number>(null)
	const cType = ref<number | string >(1)
	const opt = ref<any>([])
	const opt_ = reactive([])
  const lastType = ref<boolean>(true)
	function select(node,index){
		let list = get_(node)
    
    if(index === 0){
      list = get_('opt')
      lastType.value = true
      for(let i = 0; i<= opt_.length;i++){
        clear_(opt[i])
        opt_.splice(0,i)
      }
    }else{
      opt_.splice(1,index)
    }
    const opt_new = list&& JSON.parse(list)
    console.log(opt_new,'222')
    selcetIndex.value = opt_new.index
    opt.value = index == 0 &&  opt_new || opt_new.children
	}
  function selectList(Node:any,index:number){
    if(Node.children){
      opt.value = []
      opt.value = Node.children
      cType.value ++ 
      set_(Node.name,JSON.stringify({index:index,children:Node.children}))
      opt_.push(Node.name)
      lastType.value = true
    }else{
      selcetIndex.value = index
      lastType.value = false
      if(opt_.length === cType.value){
            opt_[cType.value-1] = Node.name
        emit('change',opt_)
      }else{
       opt_.push(Node.name)
       emit('change',opt_)
       opt_.map((item)=>{
        clear_(item)
       })
      }
    }

  }
	const init_ = (async () => {
		const result = await setApi({
			name: 'address',
      unLoading:true   //默认风格
		})
		opt.value = result.data
		set_('opt',JSON.stringify(result.data))
	})
	function close() {
		emit('close',false)
	}
	const emit = defineEmits({})
</script>
<style scoped lang="scss">
	@import './BSelectarea.scss'
</style>